<template>
  <div class="app-container">
    <el-breadcrumb separator="/">
      <el-breadcrumb-item>首页</el-breadcrumb-item>
      <el-breadcrumb-item>物质管理</el-breadcrumb-item>
      <el-breadcrumb-item>物质分类</el-breadcrumb-item>
    </el-breadcrumb>
    <el-card shadow="never" class="operate-top-card">
      <el-button
        type="warning"
        icon="el-icon-circle-plus-outline"
        class="btn-warning"
        @click="addEdit(1,2,'add')"
        >添加</el-button
      >
      <tree-table
        :data="cateList"
        :columns="columns"
        :selection-type="false"
        :expand-type="false"
        show-index
        index-text="#"
        border
      >
        <template v-slot:handle="scope">
          <el-button
            type="primary"
            icon="el-icon-edit"
            size="small"
            @click="addEdit(scope.rowIndex, scope.row, 'edit')"
          ></el-button>
          <el-button
            type="danger"
            icon="el-icon-delete"
            size="small"
            @click="handleDel(scope.rowIndex, scope.row)"
          ></el-button>
        </template>
      </tree-table>
      <!-- 分页 -->
      <el-pagination
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :current-page="pageNum"
        :page-sizes="[5, 10]"
        :page-size="pageSize"
        layout="total, sizes, prev, pager, next, jumper"
        :total="total"
      >
      </el-pagination>
    </el-card>
    <!-- 编辑或添加框 -->
    <el-dialog :title="addHeEdit[addOrEdit]" :visible.sync="dialogFormVisible">
      <el-form :model="form">
        <!-- 分类名称 -->
        <el-form-item label="分类名称" :label-width="formLabelWidth">
          <el-input v-model="form.name" autocomplete="off"></el-input>
        </el-form-item>
        <!-- 分类名称 -->
        <!-- 父分类 -->
        <el-form-item label="父分类" :label-width="formLabelWidth" v-if="add">
          <el-cascader
            :options="options"
            v-model="pid"
            :props="{ checkStrictly: true }"
            clearable
          ></el-cascader>
        </el-form-item>
        <!-- 备注 -->
        <el-form-item label="备注" :label-width="formLabelWidth">
          <el-input
            type="remark"
            :rows="2"
            placeholder="请输入内容"
            v-model="form.remark"
          >
          </el-input>
        </el-form-item>
        <!-- 备注 -->
        <!-- 排序 -->
        <el-form-item label="排序" :label-width="formLabelWidth">
          <el-input-number
            v-model="form.sort"
            @change="handleChange"
            :min="1"
            :max="10"
            label="描述文字"
          ></el-input-number>
        </el-form-item>
        <!-- 排序 -->
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="dialogFormVisible = false">取 消</el-button>
        <el-button type="primary" @click="addData">确 定</el-button>
      </div>
    </el-dialog>
  </div>
</template>
  </div>
</template>

<script>
export default {
  name: "productCategorys",
  data() {
    return {
      addHeEdit: {
        add: "添加分类",
        edit: "编辑分类",
      },
      addOrEdit: "",
      add: true,
      formLabelWidth: "120px",
      form: {},
      dialogFormVisible: false,
      pageNum: 1,
      pageSize: 5,
      options: [],
      total: null,
      cateList: [],
      pid: [],
      columns: [
        {
          label: "分类名称",
          prop: "name",
        },
        {
          label: "排序",
          prop: "sort",
        },
        {
          label: "创建时间",
          prop: "createTime",
        },
        {
          label: "修改时间",
          prop: "modifiedTime",
        },
        {
          label: "备注",
          prop: "remark",
        },
        {
          label: "层级",
          prop: "lev",
        },
        {
          label: "操作",
          prop: "handle",
          type: "template",
          template: "handle",
        },
      ],
    };
  },
  methods: {
    // 排序
    handleChange() {},
    // 跳转
    handleCurrentChange(val) {
      this.pageNum = val;
      this.getDataList();
    },
    // 改变每页的大小
    handleSizeChange(val) {
      this.pageNum =1,
      this.pageSize = val 
      this.getDataList();
    },
    // 删除
    async handleDel(index, data) {
      let id = data.id;
      let res = await this.$confirm(
        "此操作将永久删除该用户, 是否继续?",
        "提示",
        {
          confirmButtonText: "确定",
          cancelButtonText: "取消",
          type: "warning",
        }
      ).catch(() => {
        this.$message({
          type: "info",
          message: "已取消删除",
        });
      });
      if ("confirm" === res) {
        const { data: res } = await this.$http.delete(
          "productCategory/delete/" + id
        );
        if (res.code === 200) {
          this.$message.success("删除成功");
          this.getDataList();
        } else {
          this.$message.error(res.msg);
          this.getDataList();
        }
      }
    },
    // 添加或者修改
    async addEdit(index, data, type) {
      if (type === "add") {
        this.dialogFormVisible = true;
        this.add = true;
        this.addOrEdit = "add";
      } else if (type === "edit") {
        this.dialogFormVisible = true;
        this.addOrEdit = "edit";
        this.add = false;
        let id = data.id;
        let res = await this.$http.get("productCategory/edit/" + id);
        if (res.data.code === 200) {
          console.log(res.data);
          this.form = res.data.data;
        }
      }
    },
    // 添加或者编辑的确定键
    async addData() {
      if (this.add === true) {
        let pid = this.pid[this.pid.length - 1];
        this.form.pid = pid;
        await this.$http.post("productCategory/add", this.form);
        this.getDataList();
        this.dialogFormVisible = false;
      } else if (this.add === false) {
        let id = this.form.id;
        let res = await this.$http.put(
          "productCategory/update/" + id,
          this.form
        );
        this.getDataList();
        this.dialogFormVisible = false;
        this.$message.success("修改成功");
      }
    },
    // 得到数据
    async getDataList() {
      let res = await this.$http.get(
        "productCategory/categoryTree?pageNum=" +
          this.pageNum +
          "&pageSize=" +
          this.pageSize
      );
      if (res.data.code === 200) {
        this.cateList = res.data.data.rows;
        this.total = res.data.data.total;
        this.options = [];
        res.data.data.rows.forEach((item) => {
          this.options.push({
            label: item.name,
            value: item.id,
            pid: item.pid,
            children: [],
          });
          item.children.forEach((item) => {
            this.options.forEach((item1) => {
              item1.children.push({
                label: item.name,
                pid: item.pid,
                value: item.id,
              });
            });
          });
        });
      }
    },
  },
  mounted() {
    this.getDataList();
  },
};
</script>

<style lang="less"  scope>
.app-container {
  height: 100%;
  margin-right: 20px;
  background-color: #eaedf1;
  .el-breadcrumb {
    padding: 20px 0 10px 3%;
    background-color: #eaedf1;
  }
  .operate-top-card {
    width: 94%;
    margin: 0 auto;
    .btn-warning {
      margin-bottom: 10px;
    }
  }
}
</style>